<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sysTool</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>


    <script src="/webjars/vue/2.1.3/vue.js"></script>

    <script type="text/javascript" src="/jquery.qrcode.min.js"></script>
</head>
<body>

<div class="container-fluid" id="sysToolApp" style="margin: 50px auto;">

    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">


            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapseOne">
                                base64
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">



                            <form role="form">

                                <div class="form-group">
                                    <label for="">文本</label>
                                    <input type="text" class="form-control" v-model="toolData.text1" />
                                </div>
                                <div class="form-group">
                                    <button type="button" @click="encode" class="btn btn-default">加密</button>
                                    <button type="button" @click="decode" class="btn btn-default">解密</button>
                                </div>
                                <div class="form-group">
                                    <label for="">结果</label>
                                    <textarea class="form-control" rows="7" v-model="toolData.text2"  ></textarea>
                                </div>




                            </form>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapseTwo">
                                qrCode
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">

                            <form role="form">
                                <div class="form-group">
                                    <label for="">text</label>
                                    <input type="text" class="form-control"
                                           v-model="qr.text"
                                    />
                                </div>


                                <div class="form-group">

                                    <button type="button" @click="toCode"  class="btn btn-default">test</button>
                                </div>



                                <div class="form-group">
                                    <!--<label for="">text</label>-->
                                    <div class="col-sm-offset-4" id="qrcodeCanvas"></div>
                                </div>


                            </form>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion"
                               href="#collapseThree">
                                点击我进行展开，再次点击我进行折叠。第 3 部分
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                            vice lomo.
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

</body>
</html>


<script>

    var vm = new Vue({
        el: '#sysToolApp',
        data: {


            toolData: {
                text1:'',
                text2: '',
            },


            qr:{

//                render   : "canvas",
//                width:200,
//                height:200,
//                correctLevel    : 1,
                text:"http://www.baidu.com/",
            }





        },
        methods: {

            b64:function () {

                var Base64 = {_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

                return Base64;
            },

            encode: function () {

                if(this.toolData.text1 != ''){


                    var encoder =  this.b64().encode(this.toolData.text1);
                    this.toolData.text2 = encoder;
                }
            },

            decode: function () {

                if(this.toolData.text2 != ''){


                    var decoder =  this.b64().decode(this.toolData.text2);
                    this.toolData.text1 = decoder;
                }
            },

            toCode:function () {

                var  qr={

                    render   : "canvas",
                    width:200,
                    height:200,
                    correctLevel    : 1,
                    text:"",
                };



                var _self = this;

                var str=this.toUtf8(_self.qr.text);
                qr.text=str;


                $('#qrcodeCanvas').empty();
//                $('#qrcodeCanvas').qrcode(_self.qr);
                $('#qrcodeCanvas').qrcode(qr);

            },


            toUtf8:function (str) {
                var out, i, len, c;
                out = "";
                len = str.length;
                for(i = 0; i < len; i++) {
                    c = str.charCodeAt(i);
                    if ((c >= 0x0001) && (c <= 0x007F)) {
                        out += str.charAt(i);
                    } else if (c > 0x07FF) {
                        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
                        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
                    } else {
                        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
                        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
                    }
                }
                return out;
            }


        },
        mounted: function () {

        }
    });

</script>